<template>
  <div class="container">

    <!-- -----------------------------------------------------------------过滤器一栏---------------------------------- -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        :placeholder="table.name"
        style="width: 200px;"
      />
      <el-button
        type="primary"
        icon="Search"
      >
        {{ listQuery.search}}
      </el-button>
    </div>


    <!-- -----------------------------------------------------------------学生管理表格栏---------------------------------- -->
    <div class="table-container">
      <el-table
        :data="StudentPersonalInfos"
        border
        fit
        highlight-current-row
        style="width: 100%;height: 100%"
        scrollbar-always-on="true"
      >
        <el-table-column
          :label="table.number"
          type="index"
          align="center"
          width="80px"
        >
        </el-table-column>
        <el-table-column
          :label="table.name"
          prop="username"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          :label="table.sex"
          prop="sex"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          :label="table.phoneNumber"
          prop="phoneNumber"
          width="180px"
          align="center"
        >
        </el-table-column>
        
        <el-table-column
          :label="table.role"
          prop="role"
          width="180px"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column
          :label="table.headPortrait"
          prop="headPortrait"
          width="180px"
          align="center"
        >
        </el-table-column> -->
        <el-table-column
          :label="table.actions"
          align="center"
          min-width="100px"
        >
          <template #default="scope">
            <el-button
              type="primary"
              size="mini"
              @click="joinClass(scope.row)"
            >
              {{ table.add}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>      
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// import axios from '@/utils/axios'
// import { ElMessage } from 'element-plus'
export default {
  name: 'Good',
  setup() {
    const state = reactive({
      loading: false,
      tableData: [], // 数据列表
      multipleSelection: [], // 选中项
      total: 0, // 总条数
      currentPage: 1, // 当前页
      pageSize: 10 // 分页大小
    })
    const dataMap = reactive({
      listQuery: {
        page: 1,
        limit: 10,
        className: "班级名称",
        search: "搜索",
        creClass: "创建班级",
        addTeacher:"任命教师"
      },
      table: {
        number: "序号",
        name: "姓名",
        sex: "性别",
        headPortrait: "头像",
        phoneNumber: "手机号",
        role:"角色",
        oldPassword: "旧密码",
        newPassword: "新密码",
        comfirmPassword:"确认密码",

        actions: "操作",
        detail: "查看信息",
        edit: "编辑信息",
        add: "邀请进入班级"
      },
      StudentPersonalInfos: "",
      // 是否显示修改密码框
      isChangePasswordVisible: false,
      // 密码
      password:{
          newPassword: "",
          comfirmPassword: ""
      },
      // 选中的学生
      selectedStu: ''
    })
    onMounted(() => {
    })
    
    return {
      ...toRefs(state),
      ...toRefs(dataMap)
    }
  },
  methods: {
      // 获取学生信息
      getStudentPersonalInfo() {
        var _this = this
        let formData = new FormData()
        formData.append("classId",this.$route.query.classgradeId)
        this.$axios
          .post('/teacher/class/students',formData)
          .then( response => {
              let stateCode = response.headers["state"]
              if(stateCode=="200"){
                this.StudentPersonalInfos = response.data
              }
              else if(stateCode==null){
                  this.$message.success("请求数据异常！")
              }
              else{
                  this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
              }

          })
          .catch(function (error){
              let stateCode = error.response.headers["state"]                            
              if(stateCode!=""){
                  _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
              }
              else{
                  _this.$message.error("后端异常")
              }
          })
          .then(function (){
              console.log("测试成功")
          }) 
      },
      // 邀请学生进入班级
      joinClass(student){
          var _this = this
          ElMessageBox.confirm('你确定邀请"' + student.username +  '"进入班级"' + this.$route.query.classgradeName + '吗？', '警告',
              {
                  confirmButtonText: 'Yes',
                  cancelButtonText: 'Cancel',
                  type: 'warning',
              }
          )
              .then(() => {
                let formData = new FormData()
                formData.append("classgradeId",this.$route.query.classgradeId)
                formData.append("stuId",student.userId)
                this.$axios
                  .post('/teacher/student/invite',formData)
                    .then( response => {
                        let stateCode = response.headers["state"]
                        if(stateCode=="200"){
                            // location.reload()
                        }
                        else if(stateCode==null){
                            this.$message.success("邀请学生异常！")
                        }
                        else{
                            this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
                        }

                    })
                    .catch(function (error){
                        let stateCode = error.response.headers["state"]                            
                        if(stateCode!=""){
                            _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
                        }
                        else{
                            _this.$message.error("后端异常")
                        }
                    })
                    .then(function (){
                        console.log("测试成功")
                    }) 
              })
              .catch(() => {
                  ElMessage({
                      type: 'error',
                      message: '已取消邀请',
                  })
              })
      },
  },
  mounted() {
    this.getStudentPersonalInfo()
  }
}
</script>

<style scoped>
  .container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  .el-card.is-always-shadow {
    min-height: 100%!important;
  }

  .filter-container {
    height: 10%;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
  }

  .table-container {
    height: 90%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }

  
.updatePasswordBox {
    height: 90%;
    width: 100%;
    background-color: bisque;
    box-sizing: border-box;
}
</style>